<script setup>
  import { tasksListAPI } from '@/apis/task'
  import { onMounted, ref } from 'vue'

  //提货列表
  const tasksList = ref([])
  //页码
  const nextPage = ref(1)
  //下拉刷新 状态控制
  const isShowStatus = ref(false)
  //总页码
  const totalPages = ref(null)
  //空数据显示
  const isEmpty = ref(false)

  onMounted(() => {
    getTasksList()
  })

  //获取数据
  async function getTasksList() {
    const { data, code } = await tasksListAPI({
      status: 1,
      page: nextPage.value,
      pageSize: 5,
    })
    if (nextPage.value === 1) tasksList.value = []
    if (code !== 200) return uni.utils.toast('获取数据失败')

    tasksList.value = [...tasksList.value, ...data.items]
    if (tasksList.value.length === 0) isEmpty.value = true
    totalPages.value = data.pages
  }

  //上拉分页
  function onScrollNextPage() {
    if (nextPage.value >= totalPages.value) return
    nextPage.value++
    getTasksList()
  }

  //下拉刷新
  async function onScrollFresh() {
    isShowStatus.value = true
    nextPage.value = 1
    await getTasksList()
    isShowStatus.value = false
  }
</script>

<template>
  <scroll-view
    @scrolltolower="onScrollNextPage"
    @refresherrefresh="onScrollFresh"
    :refresher-triggered="isShowStatus"
    scroll-y
    refresher-enabled
    class="scroll-view"
  >
    <view class="scroll-view-wrapper">
      <view v-for="pickup in tasksList" :key="pickup.id" class="task-card">
        <navigator
          hover-class="none"
          :url="`/subpkg_task/detail/index?id=${pickup.id}&&enablePickUp=${pickup.enablePickUp}`"
        >
          <view class="header">
            <text class="no">任务编号: {{ pickup.transportTaskId }}</text>
            <!-- <text class="status">已延迟</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ pickup.startAddress }}</view>
              <view class="line">{{ pickup.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ pickup.planDepartureTime }}</view>
          <navigator
            v-if="pickup.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${pickup.id}`"
            class="action"
          >
            提货
          </navigator>
          <text v-else :disabled="true" class="action disabled"> 提货 </text>
        </view>
      </view>
      <view v-if="isEmpty" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
